<template>
  <ElPopover placement="bottom-end" :width="300" trigger="click" :teleported="false"
    @before-enter="() => { notiStore.show = true; notiStore.init() }">
    <template #reference>
      <div class="notification-icon">
        <ElIcon class="icon">
          <Bell />
        </ElIcon>
        <span class="notification-count">({{ total }})</span>
      </div>
    </template>
    <ElTabs v-if="notiStore.show">
      <ElTabPane v-if="notiStore.types.includes('suggestList')" :label="'反馈管理' + ' (' + adminsuggestList.total + ')'">
        <div v-if="!adminsuggestList?.list.length">暂无最新消息</div>
        <template v-for="(row, index) in adminsuggestList?.list" :key="index">
          <div class="item" v-if="index < 5" @click="onRead2(row.id)">
            <div class="title">{{ row.content }}</div>
            <div class="time">{{ row.createdAt }}</div>
          </div>
        </template>
      </ElTabPane>
      <ElTabPane v-if="notiStore.types.includes('suggest')" :label="'我的反馈' + ' (' + suggestList.total + ')'">
        <div v-if="!suggestList?.list.length">暂无最新消息</div>
        <template v-for="(row, index) in suggestList?.list" :key="index">
          <div class="item" v-if="index < 5" @click="onRead1(row.SuggestId)">
            <div class="title">{{ row.content }}</div>
            <div class="time">{{ row.createdAt }}</div>
          </div>
        </template>
      </ElTabPane>
      <ElTabPane v-if="notiStore.types.includes('message')" :label="'消息' + ' (' + groupList.total + ')'">
        <ListItem :instance="groupList"></ListItem>
        <div class="textbutton account" @click="router.push('account')">
          前往通知中心
        </div>
      </ElTabPane>
    </ElTabs>
  </ElPopover>
</template>

<script lang="ts" setup>
import { NotiStore } from "@b/model/store/notification";
import { ElPopover, ElIcon, ElTabs, ElTabPane } from "element-plus";
import { Bell } from "@element-plus/icons-vue";
import ListItem from "@/components/group/group_list.vue";
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
const notiStore = new NotiStore();
const suggestList = notiStore.suggestList;
const adminsuggestList = notiStore.adminSuggestList;
const groupList = notiStore.groupList;

const total = computed(() => notiStore.total);
const onRead1 = async (SuggestId?: number) => {
  if (!SuggestId) return;
  const reload = route.path === "/suggestSelfInfo";
  await router.push("suggestSelfInfo?id=" + SuggestId);
  if (reload) router.go(0);
};
const onRead2 = async (SuggestId?: number) => {
  if (!SuggestId) return;
  const reload = route.path === "/suggestInfo";
  await router.push("suggestInfo?id=" + SuggestId);
  if (reload) router.go(0);
};
</script>

<style scoped>
.notification-icon {
  margin-right: 20px;
  cursor: pointer;
  color: var(--el-color-primary);
  white-space: nowrap;
}

.notification-count {
  font-size: 0.8em;
  vertical-align: top;
}

.item {
  display: flex;
  padding: 12px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
}

.item .avatar {
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 12px;
}

.item .title {
  color: var(--el-text-color-secondary);
  font-size: 0.75em;
  min-width: 5em;
}

.item .center {
  flex-grow: 1;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 4px;
}

.item .time {
  margin-top: 4px;
  font-size: 0.8rem;
}

.account {
  text-align: center;
  padding-top: 6px;
}
</style>
